import styles from "./index.scss";
import { useRequest } from "taro-hooks";
import { getExpireList} from "@/services/ExpireList";
import { useFamilyStore } from "@/model";
import Card from "@/components/Card";
import Taro, { useDidShow } from "@tarojs/taro";
import { Image, View } from "@tarojs/components";

import { getImgUrl } from "@/utils";
import Empty from "@/components/Empty";

export default () => {
  const { family } = useFamilyStore();
    const { data,refresh } =
  useRequest(getExpireList, {
    defaultParams: [family?.id],
  });
  useDidShow(() => {
    refresh();
  });
  return (
    <View className={styles.container}>
      {
        !!data?.length ? <View className={styles.list}>
        {data?.map?.((item) => {
          return (
            <Card
              key={item.id}
              onClick={() => {
                Taro.navigateTo({
                  url: "/innerPages/material/detail/index?id=" + item.id,
                });
              }}
            >
              <View className={styles.card}>
                <Image src={getImgUrl(item.imgUrl)} className={styles.icon} />
                <View className={styles.right}>
                  <View className={styles.rightTop}>
                    <View className={styles.name}>{item.name}</View>
                  </View>
                  <View className={styles.rightBottom}>
                    <View>过期时间：{item.createdTime}</View>
                  </View>
                </View>
              </View>
            </Card>
          );
        })}
  </View>:<Empty />
      }
          
    </View>
  );
};
